<template>
	
	<view class="option">
		<!-- 日期选择 -->
		
		<TimeSelector @changeOption="changeOption" :timeOptions="timeOptions"></TimeSelector>
		<!-- 志愿者信息选择 -->
		<view class="select">
			<view class="top">
				<view class="option-list">
					<view class="option-item" v-for="(item,index) in typeOptions" :key="item.value" @click="changeOption('type',item.value)" :class="{'active': item.value === pickOptions['type']}" >
						<text class="a-text">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="click" @click="moreOptionVisible = !moreOptionVisible" role="button" :aria-label="popupLabel">
					<text class="margin__right--4">志愿者</text>
					<image :aria-label="popupLabel" src="@/static/xzhu/down.svg"></image>
				</view>
				<!-- 点击志愿者分类后显示的小弹窗 -->
				<view class="popup popup--absolute popup-select" :class="{'active':moreOptionVisible}">
					<view class="option-list" v-for="(property,index) in Object.keys(selectOptions)" :key="index" >
						<view class="option-item" v-for="(item,index) in selectOptions[property]" :key="index"  @click="changeOption(property,item.value)"   :class="{'active': item.value === pickOptions[`${property}`]}">
							<text class="text__sub">{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="">
					<uni-pagination :current="page.pageNum" :show-icon="true"  :total="page.total" @change="handleChangePage" :pageSize="page.pageSize" />
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {dateFormat} from "@/utils/util.js"
	import TimeSelector from "@/components/TimeSelector/TimeSelector.vue"
	const typeOptions = [
				{
					name:"离你最近",
					value:1
				},
				{
					name:"离景点最近",
					value:2
				},
			]
	const selectOptions = {
			
			gender:[
				{
					name:"男",
					value:1
				},
				{
					name:"女",
					value:2
				},

			],
			age:[
				{
					name:"18岁以下",
					value:1
				},
				{
					name:"18-25",
					value:2
				},
				{
					name:"26-40",
					value:3
				},
				{
					name:"40-55",
					value:4
				},
				{
					name:"55岁以上",
					value:5
				},

			],
			count: [
				{
					name:"大于3次",
					value:1
				},
				{
					name:"大于5次",
					value:2
				},
			],
			score: [
				{
					name:"8.0 - 9.0",
					value:1
				},
				{
					name:">9.0",
					value:2
				},
			]
		}
	
	export default{
		emits:['changeOption','changePage'],
		props:['pickOptions','page','timeOptions'],
		components:{
			TimeSelector,
		},
		data(){
			return {
				moreOptionVisible:false,
				selectOptions,
				typeOptions,
			}
		},
		computed:{
			popupLabel(){
				if(this.moreOptionVisible){
					return "关闭志愿者弹窗"
				}
				return "开启志愿者弹窗"
			}
		},
		methods:{
			changeOption(property,value){
			    this.moreOptionVisible = false	
				this.$emit("changeOption",property,value)
			},
			handleChangePage(e){
				const curPage = e.current
				this.$emit('changePage',curPage)
			},	
		},
		
	}
</script>

<style lang="scss" scoped>
	.option-time{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height:80px; 
		margin-bottom: 8px;
		
		.line{
			height: 80%;
			width: 1px;
			background-color: black;
		}
		
		.time-selector{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			
			height:100%;
		}
		
		.selector-time{
			font-size:22px;
			font-weight: 700;
		}
		
		.selector-desc{
			font-size:14px;
			font-weight: 400;
		}
		
	}
	
	.select{
		width: 280px;
		display: flex;
		flex-direction: column;
		
		text{
			font-size: 16px;
			font-weight: 600;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 1);
		}
			
		
		.option-list{
			display: flex;
			gap:6px;
			flex-wrap: wrap;
			margin-bottom: 6px;
		}
		
		.option-item{
			@include border-four-roundings;
			width: auto;
			padding:6px 4px;	
			justify-content: center;
			align-items: center;
			.a-text{
				margin-top: 2px;
				display: inline-block;
				padding-left: 7px;
				padding-right: 7px;
			}
			
			&.active{
				background-color: rgba(52, 58, 64, 1);
				text{
					color: rgba(255, 255, 255, 1);
				}
			}
		}
		.top{
			display: flex;
		
			
		}
		.bottom{
			position:relative;
		
			display: flex;
			justify-content: space-between;
			.click{
				@include border-four-roundings;
				padding:6px;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				
				image{
					width: 18px;
					height: 12px;
				}
			}
			.uni-pagination__num{
				display: none;
			}
			.uni-pagination__btn{
				width: 25rpx;
				border-radius: 20px;
				border: 1.5px solid rgba(66, 65, 65, 1);
				margin: 0 10rpx;
				background: #FFFFFF;
			}
			
		
		}
	}
	.popup-select{
		display:none;
		width:90%;
		padding:6px 6px;
		top:120%;
		@include border-four-roundings;
		
		&.active{
			display:block;
		}
	}
	
</style>